<template>
  <div id="titleChange">
    <el-collapse v-model="activeNames3">
      <el-collapse-item title="左侧内容" name="3">
        <div class="content">
          <el-row :gutter="10" type="flex" justify="start" align="middle">
            <el-col :span="5">
              <span>显示内容：</span>
            </el-col>
            <el-col :span="19">
              <div>
                <el-radio v-model="styles.type" :label="1">我的余额</el-radio>
                <el-radio v-model="styles.type" :label="2">我的积分</el-radio>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10" type="flex" justify="start" align="middle" style="margin-top: 20px">
            <el-col :span="5">
              <span>左侧文字：</span>
            </el-col>
            <el-col :span="19">
              <el-input
                size="small"
                style="width:330px"
                v-model="styles.upLoad1.text"
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames2">
      <el-collapse-item title="内容样式" name="2">
        <ul class="content-list">
<!--          <li>-->
<!--            <span>背景颜色：</span>-->
<!--            <div>-->
<!--              <colorSetting v-model="styles.colorBg" :originColor="styles.colorBg" initColor="#fff"></colorSetting>-->
<!--            </div>-->
<!--          </li>-->
          <li>
            <span>上间距：</span>
            <div>
              <edgeSetting v-model="styles.marginTop" unit="px" :max="50" :init="Number(styles.marginTop)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>下间距：</span>
            <div>
              <edgeSetting v-model="styles.marginBottom" unit="px" :max="50" :init="Number(styles.marginBottom)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>左右间距：</span>
            <div>
              <edgeSetting v-model="styles.marginLR" unit="px" :max="50" :init="Number(styles.marginLR)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>圆角：</span>
            <div>
              <edgeSetting v-model="styles.circle" unit="px" :max="25" :init="Number(styles.circle)"></edgeSetting>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import edgeSetting from "../../comm/edgeSetting";
import upLoadUrl from "../../comm/uploadUrl";
import upLoadImage from "../../comm/upLoadImage";
import colorSetting from "../../comm/colorSetting";
export default {
  name: "titleChange",
  data() {
    return {
      activeNames1: "1",
      activeNames2: "2",
      activeNames3: "3",
      activeNames4: "4",
    };
  },
  computed: {
    ...mapState(["list", "currentId", "currentName"]),
    upLoad1() {
      return this.list[this.currentId].styles.upLoad1;
    },
    styles() {
      return this.list[this.currentId].styles;
    },
  },
  components: {
    edgeSetting,
    upLoadUrl,
    upLoadImage,
    colorSetting,
  },
};
</script>

<style lang='less' scoped>
@import url("../../../assets/css/base.less");
.content {
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 4px;
}
</style>
